<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style>
table{table-layout:fixed;font-size:12px;}
  tr{background-color:#F1F6F6;}
  td{border:1px solid #D9D9D9;color:black;padding:2px;}
  .error{border:red 1px solid;}
</style>
<script type="text/javascript" src="../../js/tools/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var length=0;
$(document).ready(function(){

     $.getJSON("../../groupbyajax/brand!picturesListForOption.action?time="+new Date().getTime(),function(data){
        $("#picId").html(data.select);
      });
     
});
function add(obj)
{
 
  if(length<5)
  {
    var html='<tr>'+
			 '<td  ><input type="file" name="upload"/><a href="javascript:void(0)" onclick="delteUpload(this);">取消</a></td>'+
			 '<td>'+
			  ' <table width="100%">'+
			   '  <tr><td width="10%">名称:</td><td><input type="text" name="title" maxlength="30"/></td></tr>'+
			   '   <tr><td>描述:</td><td><textarea rows="2" cols="30" name="descriptions" maxlength="100"></textarea></td></tr>'+
			  ' </table>'+
			 '</td>'+
			' </tr>';
   $(obj).parent().parent().after(html);
     length++;
  }
}
function delteUpload(obj)
{

  $(obj).parent().parent().remove();
  length--;
 
}
function checkTitle(obj)
{
   var title=$(obj).val();
   if(title.length<1||title.length>30)
   {
      alert("相册名称的字数在1~20之间!");
      $(obj).val("");
   }
}
function checkDescriptions(obj)
{
   var descriptions=$(obj).val();
   if(descriptions.length>100)
   {
      alert("相册描述的字数不能大于100!");
      $(obj).val("");
   }
}
function check()
{
 var flag=true;
  $("input[type='file']").each(function(){
    if($(this).val()=="")
    {
       $(this).addClass("error");
       alert("请选择要上传的图片");
       flag=false;
       return false;
    }else
    {
     $(this).removeClass("error");
    }
  });
  return flag;
 
}
</script>
</head>
<body>
<form action="admin/user/branduser!addPhoto.action" method="post" enctype ="multipart/form-data" onsubmit="return check();">
 <table  style="width:80%;" align="center">
  <tr><td  align="center"  colspan="2"><s:actionerror/> <s:actionmessage/> </td></tr>
 <tr><td  align="center"  colspan="2"><font size=5>上传图片</font></td></tr>
 <tr><td colspan="2">相册名称:
      <select id="picId" name="picId"></select></td></tr>
 <tr>
 <td  ><input type="file" name="upload" /><a href="javascript:void(0)" onclick="add(this)">下一个</a></td>
 <td>
   <table width="100%">
     <tr><td width="11%">名称:</td><td><input type="text" name="title" maxlength="30" onblur="checkTitle(this)"/></td></tr>
      <tr><td>描述:</td><td><textarea rows="2" cols="30" name="descriptions" maxlength="100" onblur="checkDescriptions(this);"></textarea></td></tr>
   </table>
 </td>
 </tr>
 
 <tr>
    <td  align="center" colspan="2">
       <input type="submit" value="上传">
    </td>
</tr>
</table>
</form>
</body>
</html>